import React, { useState, useEffect } from 'react';

var storage = window.localStorage;

var storage = window.localStorage;

const Scllhz_print = () => {

  useEffect(() => {
    
    var result = document.getElementsByClassName('ant-table-row')
    for (var i = result.length; i >= 1; i--) {
      if (i % 30 == 0) {
        result[i - 1].setAttribute('style', 'page-break-after:always')
        var e = document.createElement("p");
        e.innerHTML = "";
        e.style.pageBreakAfter = "always";
        result[i - 1].appendChild(e);
      }
    }

    setTimeout(() => { window.print() }, 1000)
        }, [])

  const renderitemhtml = () => {

    var dataMap = []
    var lldata = JSON.parse(storage.scllhz_print_data)
  let {startDataStr,endDataStr}=JSON.parse(storage.scllhz_print_date)
  console.log("startDataStr",startDataStr)
  console.log("endDataStr",endDataStr)

    console.log("lldata",lldata)
    for (var i = 0; i < lldata.length / 30; i++) {
      dataMap.push(lldata.slice(i * 30, (i + 1) * 30))
    }
    var  optionsbl = dataMap.map(d =>
      <div style={{ width: "100%", height: "100vh" }}>
        <div style={{ width: "100%", height: "4rem", backgroundColor: "" }}>
          <div style={{ height: "4rem", width: "4rem", position: "absolute", right: "5%", top: "5%", backgroundColor: "" }}>
          </div>
          <div style={{ textAlign: "center", height: "1rem", fontWeight: "bolder" }}></div>
          <div style={{ textAlign: "center", fontSize: "1.5rem", fontWeight: "bolder" }}>
            生产领料汇总表</div>
        </div>
        <div style={{ width: "100%", height: "1rem" }}>
          <div style={{ position: "absolute", left: "3%" }}>生产任务单范围：
            <span style={{ fontWeight: "bolder" }}>生产领料单</span>
          </div>
          <div style={{ position: "absolute", left: "40%" }}>部门范围:
            <span style={{ fontWeight: "bolder" }}>所有部门</span>
          </div>
          <div style={{ position: "absolute", left: "70%" }}>仓库范围:
            <span style={{ fontWeight: "bolder" }}>所有仓库</span>
          </div>
        </div>
        <div style={{ width: "100%", height: "1rem" }}>
          <div style={{ position: "absolute", left: "3%" }}>日期：{startDataStr}~{endDataStr}
            <span style={{ fontWeight: "bolder" }}></span>
          </div>
          <div style={{ position: "absolute", left: "40%" }}>批次范围:
            <span style={{ fontWeight: "bolder" }}>所有批次</span>
          </div>
        </div>
        <div style={{ width: "100%", height: "1rem" }}>
          <div style={{ position: "absolute", left: "3%" }}>汇总依据发料仓库：
            <span style={{ fontWeight: "bolder" }}>{[...new Set(d.map(item => item.ck))].join(', ')}</span>
          </div>
          <div style={{ position: "absolute", left: "40%" }}>
            <span style={{ fontWeight: "bolder" }}></span>
          </div>
          <div style={{ position: "absolute", left: "70%" }}>
            <span style={{ fontWeight: "bolder" }}></span>
          </div>
        </div>
        <br />
        <div style={{
          height: "2.8vh", lineHeight: "2.4vh", width: "95%",
          marginLeft: "2.5%", backgroundColor: "white", position: "relative",
          fontWeight: "800", fontSize: "0.7rem", overflow: "hidden", textAlign: 'center',
          borderStyle: "solid", borderWidth: "0.05rem", borderColor: "#B8B8B8"
        }}
        >
          <div style={{ height: "100%", width: "6%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "0" }}>序号</div>
          <div style={{ height: "100%", width: "10%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "6%" }}>仓库</div>
          <div style={{ height: "100%", width: "10%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "16%" }}>物料编码</div>
          <div style={{ height: "100%", width: "18%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "26%" }}>物料名称</div>
          <div style={{ height: "100%", width: "26%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "44%" }}>规格型号</div>
          <div style={{ height: "100%", width: "10%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "70%" }}>单位</div>
          <div style={{ height: "100%", width: "10%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "80%" }}>版本号</div>
          <div style={{ height: "100%", width: "10%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "90%" }}>数量</div>
        </div>
        <div style={{ width: "100%", height: "75%", backgroundColor: "" }}>
  {d.map(item=>      <div style={{
          height: "2.4vh", lineHeight: "2.4vh", width: "95%",
          marginLeft: "2.5%", backgroundColor: "white", position: "relative",
          fontWeight: "800", fontSize: "0.6rem", overflow: "hidden", textAlign: 'center',
          borderStyle: "solid", borderWidth: "0.05rem", borderColor: "#B8B8B8"
        }}
        >
          <div style={{ height: "100%", width: "6%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "0" }}>{item.xuhao}</div>
          <div style={{ height: "100%", width: "10%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "6%" }}>{item.ck}</div>
          <div style={{ height: "100%", width: "10%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "16%" }}>{item.wlbm}</div>
          <div style={{ height: "100%", width: "18%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "26%" }}>{item.wlmc}</div>
          <div style={{ height: "100%", width: "26%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "44%" }}>{item.ggxh}</div>
          <div style={{ height: "100%", width: "10%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "70%" }}>{item.dw}</div>
          <div style={{ height: "100%", width: "10%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "80%" }}>{item.bbh}</div>
          <div style={{ height: "100%", width: "10%", borderRightStyle: "solid", borderWidth: "0.8px", position: "absolute", left: "90%" }}>{item.zsl}</div>
        </div>)}
        </div>
      </div>
    );
return optionsbl

  }

  return (
    <div style={{ position: "relative", width: "90vw", height: "", marginLeft: "5%" }}>
      {renderitemhtml()}
    </div>
  )
}

export default Scllhz_print